<template>
    <div>
        <el-table :data="borrowList" stripe>
            <el-table-column prop="id" label="借阅ID"></el-table-column>
            <el-table-column prop="bookName" label="图书名称"></el-table-column>
            <el-table-column prop="borrowerName" label="借阅人姓名"></el-table-column>
            <el-table-column prop="borrowDate" label="借阅日期"></el-table-column>
            <el-table-column prop="returnDate" label="应归还日期"></el-table-column>
            <el-table-column prop="status" label="借阅状态">
                <template #default="scope">
                    <el-tag :type="getTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟借阅列表数据
const borrowList = ref([
    {
        id: 1,
        bookName: '《JavaScript高级程序设计》',
        borrowerName: '张三',
        borrowDate: '2025-03-01',
        returnDate: '2025-03-15',
        status: '已借阅'
    },
    {
        id: 2,
        bookName: '《Vue.js实战》',
        borrowerName: '李四',
        borrowDate: '2025-03-05',
        returnDate: '2025-03-19',
        status: '已归还'
    }
]);

// 根据借阅状态返回不同的标签类型
const getTagType = (status) => {
    switch (status) {
        case '已借阅':
            return 'warning';
        case '已归还':
            return 'success';
        default:
            return 'info';
    }
};
</script>

<style scoped></style>
